<template>
  <div id="left">
    <ul class="nav nav-pills nav-stacked">
      <li
        role="presentation"
        :class="$route.path === item.to ? 'active' : ''"
        v-for="item in links"
        :key="item.id"
      >
        <router-link :to="item.to">{{ item.text }}</router-link>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      links: [
        { text: "首页", to: "/home", id: 1 },
        { text: "水果批发", to: "/cxy", id: 2 },
        { text: "水果销售", to: "/wy", id: 3 },
        { text: "客户信息", to: "/", id: 4 },
        { text: "库存管理", to: "/yrj", id: 4 },
        { text: "订单管理", to: "/jm", id: 4 },
      ],
    };
  },
};
</script>
<style lang="scss" scoped>
#left {
    margin-top: 30px;
  .router-link-exact-active{
      background-color: #918dd4;
      color: #fff;
  }
  
    li a{
      color: #5851b8;
      font-weight: bold;
  }
  
}
</style>